/*
  1  新建子组件
  2. 在父组件内，设置二级路由规则和挂载点
  3. 👍Swtich组件包住所有的Route组件
*/

import React from 'react';
import ReactDom from 'react-dom/client';
// import 引进时改名使用as,那么以后要切换路由模式，只需要把引进的 属性 改名即可
import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom';

class Handler extends React.Component {
  render() {
    return (
      <div>
        {/* HashRouter负责路由实例化 */}
        <Router>
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>

          {/* Swtich组件的作用：匹配到任意一个路径，就停止匹配 */}
          {/* 👍推荐用Swtich组件包住所有的Route */}
          <Switch>
            <Route path="/Home" component={Home}></Route>
            <Route path="/My" component={My}></Route>
            {/* Switch匹配到这里，后面的/My就不会匹配 */}
            <Route path="/My" component={My}></Route>
            <Route path="/My" component={My}></Route>
            <Route path="/Friend" component={Friend}></Route>

            {/*404一定是通配--不写path匹配所有不存在页面，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function NotFount() {
  return <div>我是NotFount-404组件</div>;
}
function Home() {
  return (
    <div>
      <h1>我是Home组件</h1>
    </div>
  );
}
function My() {
  return (
    <div>
      <h1>我是My组件</h1>

      <Link to="/my">我的音乐</Link>
      <br />
      <Link to="/my/my2">我的音乐2</Link>
      <br />
      <Link to="/my/my3">我的音乐3</Link>

      {/* Swtich组件的作用：匹配到任意一个路径，就停止匹配 */}
      {/* 👍推荐用Swtich组件包住所有的Route */}
      <Switch>
        <Route path="/my" component={My1}></Route>
        <Route path="/my/my2" component={My2}></Route>
        <Route path="/my/my3" component={My3}></Route>
      </Switch>
    </div>
  );
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
    </div>
  );
}

function My1() {
  return (
    <div>
      <h1>我是My组件1</h1>
    </div>
  );
}
function My2() {
  return (
    <div>
      <h1>我是My组件2</h1>
    </div>
  );
}
function My3() {
  return (
    <div>
      <h1>我是My组件3</h1>
    </div>
  );
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
